"use client";

import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import GanyinDisplay from "@/components/GanyinDisplay";
import GanyinSearch from "@/components/GanyinSearch";
import GanyinDetail from "@/components/GanyinDetail";

export default function Home() {
  const [selectedFinal, setSelectedFinal] = useState<string | null>(null);
  const [selectedTone, setSelectedTone] = useState<number | null>(null);
  const [activeTab, setActiveTab] = useState<string>("display");
  
  const handleSearch = (final: string, tone: number | null) => {
    setSelectedFinal(final);
    setSelectedTone(tone);
    setActiveTab("detail");
  };
  
  const handleReset = () => {
    setSelectedFinal(null);
    setSelectedTone(null);
    setActiveTab("display");
  };

  return (
    <div className="container mx-auto py-8 px-4">
      <header className="mb-8 text-center">
        <h1 className="text-4xl font-bold mb-2">干音编码系统</h1>
        <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
          干音是由声调与韵母构成的音段的统称，俗名带调韵母。这套编码系统使用三个音元组合表示不同干音。
        </p>
      </header>
      
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div className="md:col-span-1">
          <GanyinSearch onSearch={handleSearch} />
        </div>
        
        <div className="md:col-span-3">
          {selectedFinal ? (
            <div>
              <div className="mb-4 flex items-center">
                <Button 
                  variant="outline" 
                  size="sm" 
                  onClick={handleReset}
                  className="mr-2"
                >
                  <ArrowLeft className="h-4 w-4 mr-1" />
                  返回
                </Button>
                <h2 className="text-2xl font-bold">
                  {selectedFinal} {selectedTone ? `(${selectedTone}声)` : ""}
                </h2>
              </div>
              <GanyinDetail 
                final={selectedFinal} 
                tone={selectedTone || undefined} 
              />
            </div>
          ) : (
            <Tabs value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="grid w-full grid-cols-2 mb-6">
                <TabsTrigger value="display">编码展示</TabsTrigger>
                <TabsTrigger value="rules">编码规则</TabsTrigger>
              </TabsList>
              
              <TabsContent value="display">
                <GanyinDisplay />
              </TabsContent>
              
              <TabsContent value="rules">
                <div className="bg-white rounded-lg shadow p-6">
                  <h2 className="text-2xl font-bold mb-4">干音编码规则</h2>
                  
                  <div className="space-y-6">
                    <div>
                      <h3 className="text-xl font-semibold mb-2">基本规则</h3>
                      <p className="mb-4">
                        干音编码系统使用三个音元组合表示不同干音。在现代通用汉语中，音元特指音高特征或音质特征不同的短音，是语音的基本结构单元。
                      </p>
                      
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="border rounded-lg p-4">
                          <h4 className="font-semibold mb-2">第一声（阴平）</h4>
                          <p>三个高调音元的组合</p>
                          <div className="mt-2 flex space-x-2">
                            <span className="ganyin-symbol">󰌠</span>
                            <span className="ganyin-symbol">󰌠</span>
                            <span className="ganyin-symbol">󰌠</span>
                          </div>
                        </div>
                        
                        <div className="border rounded-lg p-4">
                          <h4 className="font-semibold mb-2">第二声（阳平）</h4>
                          <p>低调音元、中调音元、高调音元的组合</p>
                          <div className="mt-2 flex space-x-2">
                            <span className="ganyin-symbol">󰌤</span>
                            <span className="ganyin-symbol">󰌡</span>
                            <span className="ganyin-symbol">󰌠</span>
                          </div>
                        </div>
                        
                        <div className="border rounded-lg p-4">
                          <h4 className="font-semibold mb-2">第三声（上声）</h4>
                          <p>三个低调音元的组合</p>
                          <div className="mt-2 flex space-x-2">
                            <span className="ganyin-symbol">󰌤</span>
                            <span className="ganyin-symbol">󰌤</span>
                            <span className="ganyin-symbol">󰌤</span>
                          </div>
                        </div>
                        
                        <div className="border rounded-lg p-4">
                          <h4 className="font-semibold mb-2">第四声（去声）</h4>
                          <p>高调音元、中调音元、低调音元的组合</p>
                          <div className="mt-2 flex space-x-2">
                            <span className="ganyin-symbol">󰌠</span>
                            <span className="ganyin-symbol">󰌡</span>
                            <span className="ganyin-symbol">󰌤</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <div>
                      <h3 className="text-xl font-semibold mb-2">韵母分类</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="border rounded-lg p-4">
                          <h4 className="font-semibold mb-2">单质韵母</h4>
                          <p className="mb-2">
                            单质韵母是由单个元音组成的韵母，包括：
                          </p>
                          <div className="flex flex-wrap gap-2">
                            <span className="px-2 py-1 bg-muted rounded">i</span>
                            <span className="px-2 py-1 bg-muted rounded">u</span>
                            <span className="px-2 py-1 bg-muted rounded">ü</span>
                            <span className="px-2 py-1 bg-muted rounded">a</span>
                            <span className="px-2 py-1 bg-muted rounded">o</span>
                            <span className="px-2 py-1 bg-muted rounded">e</span>
                            <span className="px-2 py-1 bg-muted rounded">-i</span>
                            <span className="px-2 py-1 bg-muted rounded">er</span>
                            <span className="px-2 py-1 bg-muted rounded">m</span>
                            <span className="px-2 py-1 bg-muted rounded">n</span>
                            <span className="px-2 py-1 bg-muted rounded">ng</span>
                          </div>
                        </div>
                        
                        <div className="border rounded-lg p-4">
                          <h4 className="font-semibold mb-2">后长韵母</h4>
                          <p className="mb-2">
                            后长韵母是由介音和主要元音组成的韵母，包括：
                          </p>
                          <div className="flex flex-wrap gap-2">
                            <span className="px-2 py-1 bg-muted rounded">ia</span>
                            <span className="px-2 py-1 bg-muted rounded">ua</span>
                            <span className="px-2 py-1 bg-muted rounded">io</span>
                            <span className="px-2 py-1 bg-muted rounded">uo</span>
                            <span className="px-2 py-1 bg-muted rounded">ie</span>
                            <span className="px-2 py-1 bg-muted rounded">üe</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <div>
                      <h3 className="text-xl font-semibold mb-2">注意事项</h3>
                      <p>
                        此编码系统暂不扩展到其他干音。其它干音的编码遵循不同模式规则。
                      </p>
                    </div>
                  </div>
                </div>
              </TabsContent>
            </Tabs>
          )}
        </div>
      </div>
    </div>
  );
}